<template>
  <div class="search-form-container">
    <el-form
      inline
      :model="searchForm"
    >
      <el-select
        size="small"
        clearable
        placeholder="系统类型"
        v-model="searchForm.systemType"
      >
        <el-option
          v-for="item in systemTypeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select
        size="small"
        clearable
        placeholder="日志级别"
        v-model="searchForm.level"
      >
        <el-option
          v-for="item in levelOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select
        size="small"
        clearable
        v-model="searchForm.appender"
        placeholder="日志类别"
      >
        <el-option
          v-for="item in appenderOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-input
        class="el-input"
        size="small"
        clearable
        v-model="searchForm.keyword"
        placeholder="关键字"
      ></el-input>
      <el-date-picker
        class="date-input"
        size="small"
        v-model="searchForm.start"
        type="datetime"
        placeholder="选择查询开始日期时间"
      ></el-date-picker>&nbsp;至
      <el-date-picker
        class="date-input-two"
        size="small"
        v-model="searchForm.end"
        type="datetime"
        placeholder="选择查询结束日期时间"
      ></el-date-picker>
      <el-button
        size="small"
        type="primary"
        icon="el-icon-search"
        @click="search"
        :loading="searchForm.btnLoading"
      >查询</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { generateLevelSelectorData, generateSystemTypeSelectorData, generateAppenderSelectorData } from './service';

export default {
  model: {
    prop: 'searchForm'
  },
  props: {
    searchForm: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      levelOptions: [],
      systemTypeOptions: [],
      appenderOptions: []
    };
  },
  created() {
    this.levelOptions = generateLevelSelectorData();
    this.systemTypeOptions = generateSystemTypeSelectorData();
    this.appenderOptions = generateAppenderSelectorData();
  },
  methods: {
    search() {
      this.$emit('search');
    }
  }
};
</script>

<style lang="scss" scoped>
div {
  .local-name {
    padding: 10px 0 10px 10px;
    font-size: 24px;
    font-weight: 800;
    .el-button--success {
      float: right;
      background-color: #2c83b1 !important;
      border-color: #2c83b1 !important;
      margin-right: 10px;
    }
  }
  .search-form-container {
    background-color: #fff;
    padding: 10px 10px 0 10px;
    margin: 0 10px 10px 0px;
    .el-select {
      width: 180px;
      margin-right: 10px;
      margin-bottom: 10px;
    }
    .search-input {
      width: 180px;
      margin-right: 10px;
      margin-bottom: 10px;
    }
    .el-input {
      width: 180px;
      margin-right: 10px;
      margin-bottom: 10px;
    }
    .date-input {
      width: 200px;
      margin-right: 10px;
      margin-bottom: 10px;
    }
    .date-input-two {
      width: 200px;
      margin: 0 10px;
      margin-bottom: 10px;
    }
    .el-button--primary {
      background-color: #2c83b1 !important;
      border-color: #2c83b1 !important;
      margin-bottom: 10px;
    }
  }
}
</style>
